<template>
    <div v-if="tkIsShow">
        <div class="zhezhao"></div>
        <div class="tankuang">
            <div class="tk_title">{{ title }}</div>
            <img src="../../assets/icon-close.png" class="tk_close" @click="closeTk">
            <div class="tk_content">
                <div class="table_search_box">
                    <el-form :inline="true" :model="searchForm" class="demo-form-inline">
                          <el-form-item label="课程名称">
                            <el-input v-model="searchForm.searchName" placeholder="请输入" size="small"></el-input>
                          </el-form-item>
                        <el-form-item>
                          <el-button type="primary" @click="search" size="small">查询</el-button>
                          <el-button type="primary" @click="initsearch" size="small" plain>清空</el-button>
                          <el-button type="danger" @click="editVideo(0)" size="small">新增</el-button>
                        </el-form-item>
                    </el-form>
                </div>
              <div class="table_box">
                <el-table
                    :data="tableData"
                    stripe
                    style="width: 100%">
                    <el-table-column
                    prop="id"
                    label="编号"
                    width="80"
                    align="center">
                    </el-table-column>
                    <el-table-column
                    prop="videoName"
                    label="课程名称"
                    width="400"
                    align="center">
                    </el-table-column>
                    <el-table-column
                    label="视频"
                    width="150"
                    align="center">
                    <template slot-scope="scope">
                        <el-button type="text" @click="lookVideo(scope.row.videoUrl,scope.row.videoCover)">查看</el-button>
                    </template>
                    </el-table-column>
                    <el-table-column
                    prop="videoLength"
                    label="视频时长"
                    width="150"
                    align="center">
                    </el-table-column>
                    <el-table-column
                    prop="level"
                    label="排序"
                    width="200"
                    align="center">
                    </el-table-column>
                    <el-table-column
                    label="操作"
                    align="center">
                        <template slot-scope="scope">
                            <el-button @click="editVideo(scope.row.id)" type="primary" size="medium">编辑</el-button>
                            <el-button @click="del(scope.row.id)" type="danger" size="medium">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <pagination
                :total="total"
                :limit="pageSize"
                :page="pageNumber"
                :pageSize="pageSize"
                @pageChange="pageChange"
                ></pagination>
              </div>
            </div>
        </div>
        <edit-course 
        ref="editCourse"
        @close="
          getDataList();
          "
        ></edit-course>
        <show-video ref="showVideo"></show-video>
    </div>
</template>
<script>
import Pagination from "@/components/pagination.vue";
import editCourse from "@/components/dialogbox/editCourse.vue";
import showVideo from "@/components/dialogbox/showVideo.vue";
export default {
  components: {
    Pagination,
    editCourse,
    showVideo
  },
  data() {
    return {
        tkIsShow:false,
        title:"",
        searchForm:{
            sortId:0,
            searchName:''
        },
        total: 0,
        pageSize: 30,
        pageNumber: 1,
        tableData:[]
    };
  },
  methods: {
    __init(id) { 
        this.searchForm.sortId=id;
        this.getDataList();
    },
    getDataList(){
      var url="manager/getCourseList";
      var params={
        ...this.searchForm,
        pageSize: this.pageSize,
        pageNum: this.pageNumber,
      }
      this.$post(url, params).then((res) => {
        console.log(res)
        if (res.code === 200) {
            this.tableData=res.data.list;
            this.total=res.data.total;
        } else {
          this.$message.error(res.msg)
        }
      });
    },
    closeTk(){
        this.tkIsShow = false;
    },
    pageChange(e) {
      this.pageNumber = e.page;
      this.getDataList();
    },
    editVideo(id){
        if (this.$refs.editCourse) {
            this.$refs.editCourse.tkIsShow = true;
            this.$refs.editCourse.title = "编辑课程";
            this.$refs.editCourse.__init(id,this.searchForm.sortId);
        }
    },
    lookVideo(url,cover){
      if (this.$refs.showVideo) {
            this.$refs.showVideo.tkIsShow = true;
            this.$refs.showVideo.title = "查看视频";
            this.$refs.showVideo.__init(url,cover);
        }
    },
    del(id){
      this.$confirm('此操作将永久删除该课程视频, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
            var url="manager/delCourseById";
            var params={
                id:id
            }
            this.$post(url, params).then((res) => {
                if (res.code === 200) {
                    this.$message.success('删除成功')
                    this.getDataList();
                } else {
                    this.$message.error(res.msg)
                }
            });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
    }
  }
}
</script>
<style scoped lang="scss">
  .zhezhao{
    position: fixed;
    width: 100%;
    height: 100%;
    background-color: #000;
    opacity: 0.6;
    top: 0;
    left: 0;
    z-index: 200;
  }
  .tankuang{
    position: fixed;
    width: calc(100% - 240px);
    background-color: #fff;
    top: 50px;
    left: 220px;
    z-index: 201;
    border-radius: 5px;
    height: calc(100% - 70px);
  }
  .tk_title{
    font-size: 17px;
    height: 25px;
    line-height: 25px;
    margin: 15px 0;
  }
  .tk_content{
    width: 100%;
    height: calc(100% - 100px);
    overflow-y: auto;
    &::-webkit-scrollbar {
        width: 8px; /* 设置滚动条宽度为8像素 */
        background-color: transparent;
      }
      /* 滑块样式 */
      &::-webkit-scrollbar-thumb {
        background-color: #1e4dc6; /* 设置滑块颜色为深灰色 */
        border-radius: 4px; /* 设置滑块边角半径为4像素 */
      }
      /* 滚动条轨道内部空白区域样式 */
      &::-webkit-scrollbar-track {
        background-color: #fff /* 设置轨道背景色为浅灰色 */
      }

      /* 滚动条两端按钮样式 */
      &::-webkit-scrollbar-button {
        display: none; /* 不显示按钮 */
      }

      /* 交叉点处的区域样式 */
      &::-webkit-scrollbar-corner {
        background-color: transparent; /* 设置交叉点处的背景色为透明 */
      }

      /* 调整大小手柄样式 */
      &::-webkit-resizer {
        display: none; /* 不显示调整大小手柄 */
      }
  }
  
  .tk_close{
    position: absolute;
    width: 16px;
    height: 16px;
    top: 18px;
    right: 20px;
  }
  .table_search_box{
    text-align: left;
    display: inline-block;
    margin-top: 20px;
    width:96%;
    margin-left:2%;
  }
  .table_box{
    padding: 0 2%;
  }
</style>
